<template>
  <el-dialog
    title="新增权限"
    :visible.sync="dialogShow"
    width="30%"
    @close="closeHander"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="200px"
      :inline="false"
      size="normal"
    >
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="formData.description" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch v-model="formData.enVisible" />
      </el-form-item>

      <el-form-item>
        <el-button size="small" type="primary" @click="onSubmit">提交</el-button>
        <el-button size="small" @click="dialogShow = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script>
import { addPermission } from '@/api/permission'

const defaultData = {
  enVisible: '',
  name: '',
  code: '',
  description: '',
  type: '', // 权限的类型 1菜单 2按钮
  pid: '' // 上一级的id ， 顶级是0
}
export default {
  name: 'AddForm',
  data() {
    return {
      dialogShow: false,
      formData: {
        ...defaultData
      },
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },

  created() {

  },
  methods: {
    async onSubmit() {
      await this.$refs.form.validate()
      await addPermission(this, this.formData)
      this.$message('添加成功')
      this.$emit('updatelist')
      this.closeHander = false
    },
    closeHander() {
      this.formData = { ...defaultData }
    }
  }
}
</script>

<style>

</style>
